<template>
  <el-container>
    <el-header>
      <Header title="新增药品"></Header>
    </el-header>
    <el-main>
      <div class="main_bg">
        <div class="border">
          <el-form
            :model="formInline"
            :rules="rules"
            ref="ruleFrom"
            class="demo-form-inline"
          >
            <el-form-item label="药品名称：" prop="name">
              <el-input
                v-model="formInline.name"
                placeholder="请输入2个以上字符的药品名称"
                style="width: 500px"
              ></el-input>
            </el-form-item>
            <el-form-item label="规格：" prop="specification">
              <el-input
                v-model="formInline.specification"
                placeholder="请输入药品规格"
                style="width: 500px; margin-left: 27px"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位：" prop="monad">
              <el-input
                v-model="formInline.monad"
                placeholder="请输入药品单位"
                style="width: 500px; margin-left: 27px"
              ></el-input>
            </el-form-item>
            <el-form-item label="价格：" prop="price">
              <el-input
                v-model="formInline.price"
                placeholder="请输入药品价格"
                style="width: 500px; margin-left: 27px"
              ></el-input>
            </el-form-item>
            <el-form-item label="药品类型：" prop="type">
              <el-select
                v-model="formInline.type"
                placeholder="请必须选择一种类型"
              >
                <el-option label="中药" value="中药"></el-option>
                <el-option label="西药" value="西药"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <el-button
          type="success"
          @click="adddrugs('ruleFrom')"
          style="margin-left: 700px; margin-top: 30px"
          >添加药品</el-button
        >
        <router-link :to="{ path: '/manage/j_AllPrescription' }">
          <el-button type="primary" style="margin-top: 30px; margin-left: 20px"
            >取消</el-button
          >
        </router-link>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Header from "./../common/PageHeader.vue";
export default {
  data: function () {
    return {
      formInline: {
        name: "",
        specification: "",
        monad: "",
        price: "",
        type: "",
      },
      dangerlist: [
        {
          name: "阿莫西林",
          price: "￥25",
          dosage: "一天两次、一次2粒",
        },
      ],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        specification: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        monad: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        price: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        type: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {},
  components: {
    Header,
  },
  methods: {
    adddrugs(formName) {
      //   console.log(this.formInline.type);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios({
            method: "post",
            url: "/drug/insert",
            data: {
              drugName: this.formInline.name, //名称
              specifications: this.formInline.specification, //规格
              sellPrice: this.formInline.price, //价格
              manufactor: this.formInline.monad, //单位
              chargeType: this.formInline.type, //药品类型
            },
          })
            .then((res) => {
              this.$router.push("/manage/j_AllPrescription");
              console.log(res);
              this.$message({
                message: "添加药品成功了喔！！！",
                type: "success",
              });
            })
            .catch((err) => {
              console.log(err);
              this.$message.error("添加药品失败了喔！");
            });
        } else {
          this.$message.error("请按照要求将信息填写完整哦！");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped>
.main_bg {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(182, 179, 179);
  /* height: 500px; */
  border-radius: 5px;
  padding: 20px;

  box-shadow: 0 0 3px 1px rgb(136, 135, 135);
}
.border {
  border: 1px solid rgb(182, 179, 179);
  border-radius: 5px;
  padding: 20px;
}
</style>